<template>
    <div class="content">
        <div class="control storage">
            <div class="title">存储管控</div>
            <div class="storage_cont">
                <div class="sto_card">
                    <div class="title">仓库信息</div>
                    <div class="head">
                        <el-select v-model="value" placeholder="请选择" size="mini">
                            <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                        <el-select v-model="value" placeholder="请选择" size="mini">
                            <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                        <el-button>筛选</el-button>
                        <el-button>查询</el-button>
                    </div>
                </div>
                <div class="sto_card">
                    <div class="title">罐信息</div>
                </div>
                <div class="sto_card">
                    <div class="title">异常信息</div>
                </div>
            </div>
        </div>
        <div class="control transportation">
            <div class="title">运输管控</div>
            <div class="transport_cont">
                <div class="tran_card">
                    <div class="title">车辆实时监控</div>
                </div>
                <div class="tran_card">
                    <div class="title">历史记录</div>
                </div>
                <div class="tran_card">
                    <div class="title">异常信息</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'chemicalDanger',
        data() {
            return {
                options: [{
                    value: '选项1',
                    label: '黄金糕'
                }, {
                    value: '选项2',
                    label: '双皮奶'
                }, {
                    value: '选项3',
                    label: '蚵仔煎'
                }, {
                    value: '选项4',
                    label: '龙须面'
                }, {
                    value: '选项5',
                    label: '北京烤鸭'
                }],
                value: ''
            }
        }
    }
</script>

<style scoped>
    .content{
        width:100%;
        height:100%;
        background-color: #F2F4F3;
        padding:5px;
    }
    .content .control{
        width: 100%;
        height:48%;
        background-color: #fff;
    }
    .title{
        line-height: 30px;
        padding-left: 20px;
        font-size: 14px;
        font-weight: 500;
        color: #A3C5F1;
    }
   .title:before {
        content: "";
        display: inline-block;
        width: 3px;
        height: 15px;
        background-color: #55c0f0;
        margin-right: 8px;
        vertical-align: text-top;
    }
    .storage{

    }
    .transportation{
        margin-top:0.5%;
    }
    .storage_cont,.transport_cont{
        display: flex;
        flex-direction: column;
        height:89%;
        flex-wrap: nowrap;
        flex-flow: row wrap;
        justify-content:space-between;
    }
    .sto_card,.tran_card{
        float:left;
        width: calc(32.8%);
        max-width: 1326px;
        max-height: 272px;
        margin-right: 0.1%;
        margin-left: 5px;
        height:100%;
        background-color: #fff;
        border: 1px solid #EAEEF6;
        /*border-radius: 10px;*/
        /*box-shadow: 0 2px 12px 0 #eaeef6;*/
    }
    .head{
        background-color: #f5f5ff;
        height:34px;
        width: 100%;
        padding: 5px;
    }
</style>
